<template>
	<view class="screen" style="height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #009EF0;
	background: url('../../../static/image/background1.png') no-repeat center;
	background-size: cover;">
		<view class="title">筛选</view>
		<view class="screenlist" style="height: 90%;">

			<view class="openInfo" style="background-color: #124699;">
				<text class="subtitle">预警来源</text>
				<div class="selectscreen">
					<text style="color: #fff;font-size: 12px;background-color: #009FF1;" class="selectListStyle">系统上报</text>
				</div>
			</view>

			<view class="openInfo" style="margin:3px 0;background-color: #124699;">
				<text class="subtitle">预警级别</text>
				<div class="selectscreen" style="font-size: 12px;">
					<div class="selectListStyle" :class="{active:item.warninglevelid==isActive}" v-for="item in warninglevelList" :key="item.warninglevelid"
					 @click="checklevel(item.warninglevelid)">
						<text class="text">{{item.warninglevel}}</text>
					</div>
				</div>
			</view>

			<view class="openInfo" style="background-color: #124699;">
				<text class="subtitle">时间</text>
				<div style="display: flex;flex-direction: column;">
					<view class="selectscreen">
						<div class="selectListStyle" :class="{active:item.warningtimeID==IsActive}" v-for="item in warningtimeList" :key="item.warningtimeID"
						 @click="checkedTime(item.warningtimeID)">
							<text class="text">{{item.warningtime}}</text>
						</div>
					</view>
					<view class="dateTime">
						<picker mode="date" :value="newstartdate" @change="bindstartDateChange">
							<view class="uniinput" style="margin-left: 30px;">{{ startDate || "请选择日期"}}</view>
						</picker>
						<text>至</text>
						<picker mode="date" :value="newenddate" @change="bindendDateChange">
							<view class="uniinput" style="margin-right: 30px;">{{ endDate || "请选择日期"}}</view>
						</picker>
					</view>
				</div>
			</view>

			<view class="select">
				<text class="text" style="color:#fff;background:#009FF1;padding: 12px 42px;" @click="submitToWarning">确定</text>
				<text class="text" style="color:#fff;background:#BFBFBF;padding: 12px 42px;" @click="toWarning">取消</text>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCollapse from "@/components/uni-collapse/uni-collapse.vue";
	import uniCollapseItem from "@/components/uni-collapse-item/uni-collapse-item.vue";
	import {
		ajax
	} from "../../../api/apis";
	export default {
		components: {
			uniCollapse,
			uniCollapseItem
		},
		data() {
			return {
				endDate: "",
				startDate: "",
				params: {
					warningselect: "系统上报",
					warninglevel: "正常级",
					warninglevelid: "4",
					warningtime: "一天内"
				},
				warninglevelList: [{
						warninglevel: "正常级",
						warninglevelid: "4"
					},
					{
						warninglevel: "警示级",
						warninglevelid: "3"
					},
					{
						warninglevel: "警戒级",
						warninglevelid: "2"
					},
					{
						warninglevel: "警报级",
						warninglevelid: "1"
					},
				],
				warningtimeList: [{
						warningtime: "一天内",
						warningtimeID: 4
					},
					{
						warningtime: "三天内",
						warningtimeID: 3
					},
					{
						warningtime: "一周内",
						warningtimeID: 2
					},
					{
						warningtime: "一年内",
						warningtimeID: 1
					}
				],
				isActive: '4',
				IsActive: '4'
			};
		},
		mounted() {},
		computed: {
			newstartdate() {
				const date = new Date();
				return (
					date.getFullYear() + "-" + (date.getMonth + 1) + "-" + date.getDate()
				);
			},
			newenddate() {
				const date = new Date();
				return (
					date.getFullYear() + "-" + (date.getMonth + 1) + "-" + date.getDate()
				);
			}
		},
		methods: {
			checklevel(index) {
				this.isActive = index
			},
			checkedTime: function(index) {
				this.IsActive = index
			},
			submitToWarning() {
				let _this = this;
				let warnlevelID = this.isActive;
				uni.navigateTo({
					url: `../warningscreenlist/warningscreenlist?warninglevelid=${_this.isActive}&startDate=${_this.startDate}&endDate=`+_this.endDate
				});
			},
			toWarning() {
				let _this = this
				uni.switchTab({
					url: "../../warning/warning",
					success() {
						uni.setStorage({
							key: "warninglevelid",
							data: ""
						})
					}
				})
			},
			bindstartDateChange(e) {
				this.startDate = e.target.value;
			},
			bindendDateChange(e) {
				this.endDate = e.target.value;
			}
		}
	};
</script>

<style scoped>
	uni-page-body {
		height: 100%;
	}

	.screen {
		height: 100%;
		/* background-color: #fff; */
		display: flex;
		flex-direction: column;
	}

	.screenlist {
		flex: 1;
	}


	.title {
		font-size: 16px;
		padding: 15px;
		color: #fff;
		text-align: center;
		background: url("../../../static/image/navbg.png") no-repeat center;
	}

	.subtitle {
		text-align: left;
		color: #fff;
		font-size: 12px;
		padding: 5px 15px;
		margin-bottom: 10px;
	}

	.openInfo {
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid #ccc;
	}

	.selectscreen {
		margin: 0 24px 15px;
		display: flex;
		justify-content: space-around;
		font-size: 12px;
		background: none;
	}

	.screenlist>>>.uni-collapse-cell__title-text {
		font-size: 12px;
		color: #fff;
	}

	.screenlist>>>.uni-collapse-cell--open[data-v-05a53ffd] {
		/* background-color: #fff; */
	}

	.screeninfo {
		height: 100%;
	}

	.select {
		display: flex;
		justify-content: space-around;
		/* background-color: #124699; */
		align-items: center;
		border: none;
		margin-top: 30px;
		font-size: 16px;
		border-radius: 5px;
	}

	.text {
		font-size: 12px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 5px;
		color: #fff;
	}

	.selectListStyle {
		display: flex;
		justify-content: space-around;
		align-items: center;
		/* background: #eee; */
		padding: 7px 14px;
		border-radius: 5px;
	}

	.dateTime {
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #fff;
		font-size: 12px;
		margin-bottom: 20px;
	}

	.uniinput {
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 7px 14px;
	}

	.active {
		color: #000;
		background-color: #009FF1;
	}
</style>
